<template>
  <div class="author">
    <el-card class="box-card">
      <div class="asauthor">关于作者</div>
      <el-divider />
      <div class="avatar">
        <span><img :src="squareUrl" /></span>
        <div class="introduce">
          <div class="name">{{ data[0].essay.name }}</div>
          <div>不用关注我</div>
        </div>
      </div>

      <div class="divider"><el-divider /></div>
      <div class="answer">
        <el-row class="row-bg" justify="space-evenly">
          <el-col :span="6"
            ><div class="q">回答</div>
            <div class="s">222</div></el-col
          >
          <el-col :span="6"
            ><div class="q">文章</div>
            <div class="s">222</div></el-col
          >
          <el-col :span="6"
            ><div class="q">粉丝</div>
            <div class="s">{{ fans }}</div></el-col
          >
        </el-row>
      </div>
      <div class="author-botton">
        <el-button
          class="author-botton-attention"
          @click="attention(data[0].essay.userid)"
          :disabled="retstr(data[0].essay.userid).type"
          >{{ retstr(data[0].essay.userid).msg }}</el-button
        >
        <el-button class="author-botton-private">发私信</el-button>
      </div>
    </el-card>
  </div>
</template>

<script >
import { defineComponent, computed } from "vue";
import { useStore } from "vuex";

import LocalCache from "@/utils/cache";

export default defineComponent({
  components: {},
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  setup() {
    const store = useStore();
    const squareUrl = require("@/assets/images/log.png");
    const id = LocalCache.getCache("id");
    const attention = (userid) => {
      store.dispatch("comment/attention", { id, userid });
    };
    const data = computed(() => store.state.comment.attention);
    const fans = computed(() => store.state.comment.fans);
    console.log(data.value, "xiaozahngs");
    const retstr = (uid) => {
      if (id == uid) return { msg: "别点了我自己", type: true };
      let narr = data.value
        .map((item) => [item.attention_id])
        .filter((item) => item == uid);
      console.log(narr, "narr", narr.length);
      if (narr.length <= 0) {
        return { msg: "关注", type: false };
      } else {
        return { msg: "已关注", type: false };
      }
    };
    return { squareUrl, attention, retstr, fans };
  },
});
</script>

<style scoped lang="less" >
.author {
  width: 296px;

  .asauthor {
    font-weight: 700;
    padding: 20px 20px 10px 20px;
  }
  /deep/.el-card__body {
    padding: 0;
    .el-divider {
      margin: 0;
    }
  }
  .avatar {
    padding: 10px;
    display: flex;
    align-items: center;
    > span > img {
      width: 60px;
      height: 60px;
      //等比例显示
      object-fit: cover;
    }
    .introduce {
      margin-left: 10px;
      .name {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 7px;
      }
    }
  }
  .divider {
    padding: 0px 20px 0 20px;
  }
  .answer {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    .q {
      color: #8590a6;
      margin-bottom: 9px;
    }
    .s {
      font-size: 20px;
      font-weight: 700;
    }
  }
  .author-botton {
    text-align: center;
    margin-bottom: 20px;
    .author-botton-attention {
      width: 120px;
      height: 33px;
      background-color: #0066ff;
      color: #fefeff;
    }
    .author-botton-private {
      width: 120px;
      height: 33px;
      color: #8590a6;
    }
  }
}
</style>
